<div ng-controller="TableCtrl">
            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 表格 <small>Amaze UI</small></div>
                        <p class="page-header-description">Amaze UI 有许多不同的表格可用。</p>
                    </div>
                    <div class="am-u-lg-3 tpl-index-settings-button">
                        <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
                    </div>
                </div>

            </div>

            <div class="row-content am-cf">
                <div class="row">
                     <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">自适应表格</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>书名</th>
                                            <th>类型</th>
                                            <th>价格</th>
                                            <th>出版年份</th>
                                            <th>出版社</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody> 
                                        <tr class="gradeX" ng-repeat="book in tableListData">
                                            <td>{{book.bookName}}</td>
                                            <td>{{book.bookType}}</td>
                                            <td>{{book.price}}</td>
                                            <td>{{book.publicationYear}}</td>
                                            <td>{{book.press}}</td>
                                            <td>{{book.introduction}}</td>
                                            <td>
                                                <div class="tpl-table-black-operation">
                                                    <a href="javascript:;">
                                                        <i class="am-icon-pencil"></i> 编辑
                                                    </a>
                                                    <a href="javascript:;" class="tpl-table-black-operation-del" ng-click="removeTableList(book.bookId)">
                                                        <i class="am-icon-trash"></i> 删除
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        
                                        <!-- more data -->
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                </div> 
            </div>
 
</div>